<template>
  <div>
    <os-tabs :items="tabItems"
             :currentTab="currentTab"
             @change-tab="changeTab"></os-tabs>
    <router-view v-slot="{ Component }">
      <transition name="fade"
                  mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>
<script lang="ts">
  import { defineComponent, onMounted, ref } from 'vue'
  import { useRoute, useRouter } from 'vue-router'

  export default defineComponent({
    name: 'charts',
    setup() {
      const router = useRouter()
      const route = useRoute()
      const tabItems = ref<any>([
        {
          name: '折线图',
          icon: 'icon-zhexiantu',
          value: 'line',
        },
        {
          name: '柱状图',
          icon: 'icon-zhuzhuangtu',
          value: 'bar',
        },
        {
          name: '饼图',
          icon: 'icon-zu',
          value: 'pei',
        },
      ])
      const currentTab = ref<string>('line')
      const changeTab = (val: any) => {
        currentTab.value = val
        router.push(`/charts/${val}`)
      }
      onMounted(() => {
        currentTab.value = route.path.split('/')[2]
      })
      return {
        tabItems,
        currentTab,
        changeTab,
      }
    },
  })
</script>
<style lang="scss" scoped>
  @import '@/assets/styles/transitions/fade/fade.scss';
</style>